<extend name="Common/body"/>
<block name="exam">
<div class='exam container-fluid'>
	<div class="page-header">
		<h1>Integrated Writing</h1>
	</div>
	<div id="tips">
	<p><b>Directions</b>: For this task, you will read a passage about an academic topic and you will listen to a lecture about the same topic. You may take notes while you read and listen.</p>
	<p>Then you will write a response to a question that asks you about the relationship between the lecture you heard and the reading passage. Try to answer the question as completely as possible using information from the reading passage and the lecture. The question does not ask you to express your personal opinion. You may refer to the reading passage again when you write. You may use your notes to help you answer the question.</p>
	<p>Typically, an effective response will be 150 to 225 words. Your response will be judged on the quality of your writing and on the completeness and accuracy of the content.</p>
	<p>You should allow <b>3</b> minutes to read the passage. Then listen to the lecture. Then allow <b>20</b> minutes to plan and write your response.</p>
	</div>
	<div class="text-center">
		<button type="button" id="loadq" class="btn btn-default">Start</button>
	</div>
	<div id="ans" class="col-xs-6" style="display: none;"><textarea id="answer" name="answer" class="form-control" rows="10"></textarea></div>
	<div id="q" class="well" style="display: none;">{$ques.article}</div>
	<div class="clock">
		<p id="clock"></p>
		<p class="boom">Time out!</p>
	</div>
	<div class="text-center">
		<a href="__CONTROLLER__/w2/s/{$_GET['s']}" id="cnp" class="btn btn-default" style="display: none;">Continue to next part</a>
		<a href="#" id="reload" class="btn btn-default" style="display: none;">Continue to practice Q1</a>
		<a href="#" id="omt" class="btn btn-default" style="display: none;">One more time</a>
	</div>
</div>
<audio id="test-beep" src="__PUBLIC__/{$ques.record}"></audio>
<audio id="finished-beep" src="__PUBLIC__/media/beep.m4a"></audio>
</block>
<block name="script">
<script type="text/javascript">
$(function(){
	$("#wrt").addClass('active');
	var pt = 1;
	var rt = 1200;
	CKEDITOR.editorConfig = function( config ) {
		config.height = 400;
	};
	CKEDITOR.replace( 'answer' );
	function setCounter(prepareTime, testTime){
		$('#clock').pietimer({
			seconds: prepareTime,
			color: '#43AEFA',
			height: 100,
			width: 100
		},function(){
			$('#q').hide();
			setCounterTest(testTime);
			var testAudio = document.getElementById("test-beep");
			testAudio.loop = false;
			testAudio.addEventListener('ended', function () {
				$('#q').addClass('col-xs-6').show();
				$('#ans').show();
    			$('#clock').pietimer('start');
			}, false);
			testAudio.play();
		});
	}
	function setCounterTest(sec){
		$('#clock').pietimer({
			seconds: sec,
			color: '#43AEFA',
			height: 100,
			width: 100
		},function(){
			//setCounter(sec)
			var finAudio = document.getElementById("finished-beep");
			finAudio.play();
			$('.boom').show('slow');
			$('#reload').show('slow');
			$('#omt').show('slow');
			$('#cnp').show('slow');
		});
	}
	$('.boom').hide();
		
	$('button#loadq').click(function(){
		$('button#loadq').attr("disabled", 'true');
		$('.boom').hide();
		$('#reload').hide();
		$('#omt').hide();
		$('#cnp').hide();
		$('#q').show();
		$('#tips').hide();
		setCounter(pt, rt);
		$('#clock').pietimer('start');
		return false;
	});
	$('#reload').click(function(){
		window.location.reload();
	});
	$('#omt').click(function(){
		$('#q').hide();
		$('#ans').hide();
		$('#answer').val('');
		setCounterTest(rt);
		var testAudio = document.getElementById("test-beep");
		testAudio.loop = false;
		testAudio.addEventListener('ended', function () {  
    		$('#clock').pietimer('start');
		}, false);
		testAudio.play();
	});
});
</script>
</block>
</extend>